<template>
    <div class="wx-code" :style="style">
        <div class="code-container">
            <div class="code">
                <!--<img style="height: 100%;width: 100%;opacity: 0" :src="payimg">-->
                <div class="qrcode">
                    <!--<a :href="payimg">-->
                        <qrcode :text="wxcode" :size="200" error-level="M"></qrcode>
                    <!--</a>-->
                    <!--<img src="http://c.irunyan.com/bns/qrcode?scode=http%3A%2F%2Fc.irunyan.com%2F%3Ftype%3Dqr%26rec_id%3D7999849">-->
                </div>
            </div>
            <div class="line"></div>
            <div class="tips">
                长按识别二维码进行微信支付
            </div>
        </div>
        <confirm ref="expired" :text="confirmText" :isAlert="isExpired" @confirm="OrderExpired"/>
    </div>
</template>

<script>
    const HEIGHT =  document.documentElement.clientHeight + 'px';

    import API from '../../request/api';
    import Confirm from "../../components/common/confirm";
    import {commonMixin} from '@/common/mixin';
    export default {
        mixins: [commonMixin],
        components: {Confirm},
        name: "wx-pay-code",
        data(){
            return{
                style: {
                    height: HEIGHT
                },
                ticket: '',//票据id
                wxcode: '',//返回的二维码
                payimg: '',
                isExpired: false, //是否過期
                BtnText: '确定',
                confirmText: '',
            }
        },
        created(){
            // history.pushState(null, null, "wx-pay-code");
            // window.location.replace(window.location.hash || 'wx-pay-code');
            let payData = this.$store.state.online.createPayData;
            console.log('payData', payData)
            this.ticket= payData.getWayData.ticket_id;
            this.getWXcode()
            this.showGlobaLoading(); //打开loading
        },
        methods:{
            getWXcode(){
                this.request.post(API.PayPassConfirm,{
                    ticket_id: this.ticket
                }).then((result) =>{
                    this.hideGlobaLoading(); //关闭loading
                    if(result.status === 'no'){
                        this.BtnText = '确定';
                        this.confirmText = result.msg;
                        this.redirect = result.redirect;
                        this.$refs.expired.show();// 弹出提示弹框
                    } else {
                        this.wxcode = result.source_url
                        this.payimg= result.qr_url
                    }
                })
            },
            OrderExpired() {
                this.$router.replace(this.redirect)
            },
            // a () {
            //    window.location.replace(window.location.hash || '#');
            //    // 这里可以做一些弹窗操作，弹窗内二维码可识别
            // }
        }

    }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl'
    .wx-code{
        display flex
        flex-direction column
        align-items center
    }
    .code-container{
        margin-top 20%
        background grayF
        width vw(345)
        height vw(410)
        border-radius main-radius
    }
    .code{
        display flex
        align-items center
        justify-content center
        height vw(320)
    }
    img{
        width vw(200)
        height vw(200)
        -webkit-touch-callout none!important
        /*-webkit-touch-callout behavior!important*/
        /*-webkit-user-select text!important*/
    }
    .tips{
        width 100%
        height vw(89)
        word-vw(word14, gray3)
        line-height vw(19)
        text-align center
        display flex
        align-items center
        justify-content center
    }
    .line{
        width vw(315)
        /*height 1px*/
        border-top 1px #DEDEDE dotted
        /*background #DEDEDE*/
        margin-left cellPadding
    }
</style>